<template>
  <div class="my-table-board-div">
    <el-scrollbar class="my-board-scroll" :style="getStyle()">
      <el-row :gutter="20" v-infinite-scroll="loadTableData" infinite-scroll-disabled="disabledMore">
        <el-col :span="6" v-for="(item, index) in reqData.tableData" :key="index">
          <el-card :body-style="{ padding: '0px' }">
            <el-upload v-if="showCardImage" class="avatar-uploader" :action="uploadAction" name="saasyyFile"
              :auto-upload="true" :headers="uploadHeaders" :data="uploadData" :show-file-list="false"
              :on-success="(res,file,fileList)=>handleCardUploadSuccess(res,file,fileList,item)"
              :before-upload="beforeCardUploadUpload">
              <img v-if="item.cardImageUrl" :src="item.cardImageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-form style="margin-top: 10px;" size="mini" label-position="top">
              <el-form-item v-if="item2.visibile" v-for="(item2,index2) in columnFinalData" :key="index2">
                <span slot="label">
                  {{item2.label}}
                </span>
                {{item[item2.name]}}
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    getToken
  } from '@/utils/auth'
  import {
    saveRowCover
  } from '@/api/system/system'
  import defaultCover from '@/assets/images/default_cover.png'
  export default {
    name: 'table-board',
    computed: {
      disabledMore() {
        return this.loadingMore || this.reqData.loading || this.reqData.noMore
      }
    },
    props: {
      reqData: {
        type: Object,
        default: () => ({
          tableData: [],
          loading: false
        })
      },
      columnFinalData: {
        type: Array,
        default: () => ([])
      },
      sceneType: {
        type: Number,
        default: 0
      },
      sceneId: {
        type: Number,
        default: 0
      },
      defineSceneId: {
        type: Number,
        default: 0
      },
      showCardImage: {
        type: Boolean,
        default: false
      },
      // 表格高度
      tableHeight: {
        type: String,
        default: 0
      }
    },
    data() {
      return {
        imageUrl: '',
        uploadHeaders: {
          profile: getToken()
        },
        uploadData: {
          FolderName: 'BoardCover'
        },
        uploadAction: process.env.VUE_APP_BASE_API + '/Common/Upload/UploadFile',
        loadingMore: false
      }
    },
    created() {
      var that = this;
    },
    methods: {
      beforeCardUploadUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG|PNG 格式!');
        }
        return true;
      },
      handleCardUploadSuccess(res, file, fileList, item) {
        if (res.status) {
          item.cardImageUrl = res.outputData.fileUrl
          saveRowCover({
            sceneType: this.sceneType,
            defineSceneId: this.defineSceneId,
            rowId: item.Id,
            fileId: res.outputData.fileId
          }).then(res => {})
        }
      },
      loadTableData() {
        this.loadingMore = true
        setTimeout(() => {
          this.$$parent(this, "doSearch", {
            goNext: true
          })
          this.loadingMore = false
        }, 100)
      },
      getStyle() {
        console.log(this.tableHeight)
        return {
          height: this.tableHeight
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .avatar-uploader {
    text-align: center;
    margin-top: 10px;
  }

  .my-table-board-div .el-form {
    margin: 0 0 0 10px;
  }

  .my-table-board-div .el-col {
    margin: 0 0 10px 0;
  }

  .my-table-board-div .el-card img {
    width: 100%;
    max-height: 300px;
  }

  .my-table-board-div .el-form-item--mini .el-form-item__label {
    font-size: 14px;
    color: rgb(191, 191, 191);
    font-weight: normal;
    padding: 0;
    line-height: 20px;
    height: 20px;
  }

  .my-table-board-div .el-form-item__content {
    color: #000;
    height: 28px;
  }

  .my-table-board-div .el-form-item--mini.el-form-item {
    margin-bottom: 10px;
  }


  .my-board-scroll.el-scrollbar {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
</style>
